<template>
  <div class="play-music">
    <!-- 背景 -->
    <div class="bg" :style="{backgroundImage:`url(${playMusic.al.picUrl})` }"></div>

    <!-- 头部 -->
    <div class="header">
      <svg class="icon" aria-hidden="true" @click="$emit('back')">
        <use xlink:href="#icon-arrowLeft" />
      </svg>
      <div class="title">
        <div class="mname">{{playMusic.name}}</div>
        <div class="author">{{playMusic.ar[0].name}}</div>
      </div>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-fenxiang-m" />
      </svg>
    </div>

    <!-- 中间CD机部分 -->
    <div class="cd" v-if="!isLyric" @click="isLyric = true">
      <img :class="!isPlay? 'zhizhen' : 'zhizhen-active'" src="@/assets/needle-ab.png" />
      <img class="changpian" src="@/assets/disc-plus.png" />
      <img class="music-img" :src="playMusic.al.picUrl" />
    </div>

    <!-- 歌词部分 -->
    <div class="lyric" v-else @click="isLyric = false">
      <p v-for="(item, index) in $store.getters.lyricList" :key="index">{{item.lyric}}</p>
    </div>

    <!-- 底部控件 -->
    <div class="controller">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xunhuan" />
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
        <use xlink:href="#icon-shangyishoushangyige" />
      </svg>
      <svg v-if="isPlay" @click="play" class="icon icon-big" aria-hidden="true">
        <use xlink:href="#icon-zanting1" />
      </svg>
      <svg v-else @click="play" class="icon icon-big" aria-hidden="true">
        <use xlink:href="#icon-bofangzanting" />
      </svg>
      <svg class="icon" aria-hidden="true" @click="goPlay(1)">
        <use xlink:href="#icon-shangyishoushangyige1" />
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-liebiao" />
      </svg>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['playMusic', 'isPlay', 'play'],
  data() {
    return {
      isLyric: false
    }
  },
  computed: {
    ...mapState(['playList', 'playCurrentIndex'])
  },
  methods: {
    goPlay(n) {
      let index = this.playCurrentIndex + n
      if (index < 0) {
        index = this.playList.length - 1
      } else if (index > this.playList.length) {
        index = 0
      }
      this.$store.commit('setPlayCurrentIndex', index)
    }
  }
}
</script>

<style lang="less" scoped>
.play-music {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;

  // 背景图
  .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: auto 100%;
    background-position: center;
    filter: blur(60px);
    z-index: -1;
  }
  // 头部
  .header {
    width: 7.5rem;
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
    color: #fff;
    .title {
      position: absolute;
      left: 1.5rem;
      padding-top: 0.3rem;
      .mname {
        width: 5rem;
        font-size: 0.35rem;
      }
      .author {
        font-size: 0.25rem;
      }
    }
    .icon {
      height: 0.5rem;
      width: 0.5rem;
      fill: #fff;
    }
  }
  // cd部分
  .cd {
    position: relative;
    width: 7.5rem;
    .zhizhen {
      position: absolute;
      left: 45%;
      transform-origin: 0.1rem 0.05rem;
      transform: rotate(-15deg);
      transition: all 0.5s;
      width: 2rem;
      z-index: 2;
    }
    .zhizhen-active {
      position: absolute;
      transform-origin: 0.1rem 0.05rem;
      transition: all 0.5s;
      left: 45%;
      width: 2rem;
      z-index: 2;
    }
    .changpian {
      width: 5rem;
      position: absolute;
      left: 50%;
      top: 2rem;
      transform: translate(-50%);
      z-index: 1;
    }
    .music-img {
      position: absolute;
      left: 50%;
      top: 2.9rem;
      transform: translate(-50%);
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 1.6rem;
    }
  }
  // 控件部分
  .controller {
    width: 7.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 0.4rem 0.5rem;
    .icon {
      fill: #fff;
      width: 0.5rem;
      height: 0.5rem;
    }
    .icon-big {
      width: 1rem;
      height: 1rem;
    }
  }
  // 歌词部分
  .lyric {
    width: 7.5rem;
    height: 8rem;
    margin: 1rem 0 0;
    padding: 0 0.8rem;
    overflow: scroll;
    text-align: center;
    position: absolute;
    left: 0;
    color: #fff;
    p {
      font-size: 0.3rem;
      margin-bottom: 0.2rem;
    }
  }
}
</style>